import React, { FC, useRef, useEffect, useState } from 'react'
import { Input } from 'antd'
import "./Search.scss"
const { Search } = Input

interface IProps {
    onSearch?: (searchValues: string) => void
}
const MySearch: FC<IProps> = ({ onSearch }) => {
    const refSearch = useRef<any>()
    const [isFix, setIsFix] = useState<boolean>(false)
    const [afterFix, setAfterFix] = useState<boolean>(false)
    const handleScroll = () => {
        const disTop = refSearch.current.offsetTop - document.documentElement.scrollTop
        console.log(refSearch.current.offsetTop - document.documentElement.scrollTop)
        if (disTop < -30) {
            setIsFix(true)

        } else {
            setIsFix(false)

        }
    }
    useEffect(() => {
        console.log(refSearch.current)
        if (refSearch.current) {
            window.onscroll = () => {
                handleScroll()
            }
        }
        return () => {
            window.onscroll = () => { }
        }
    }, [])
    const handleSearch = (value: string) => {
        onSearch && onSearch(value)
    }
    return <div className={`im_search ${isFix ? 'width' : ''} ${afterFix ? 'fixed' : ''}`} ref={refSearch}>
        <Search
            placeholder="搜索照片"
            onSearch={handleSearch}
            style={{ width: 200 }}
        />
    </div>
}

export default MySearch